# Switch

The `Switch` component can be used for complex conditional rendering. The component can be switch by multiple `"cases"` of components and an `"default"` component to render in case the given dynamic value does not match any case.
Render dynamic components cleanly using this component.

### Import

```jsx
import { Switch } from 'react-haiku';
```

### Usage

import { SwitchDemo } from '../../demo/SwitchDemo.tsx';

<SwitchDemo />

```jsx
import { useState } from 'react';
import { Switch } from 'react-haiku';

const reactions = {
  'LIKE': 'like',
  'FIRE': 'fire',
  'LOVE': 'love'
}

const CaseReactionLike = () => <h1>👍</h1>
const CaseReactionFire = () => <h1>🔥</h1>
const CaseReactionLove = () => <h1>❤️</h1>
const CaseDefault      = () => <h1>🚀</h1>

export const Component = () => {
  const [reaction, setReaction] = useState();

const handleReact = (e) => {
    const reactionSelected = e.target.value;
    setReaction({
      [reactions.LIKE]: reactions.LIKE,
      [reactions.FIRE]: reactions.FIRE,
      [reactions.LOVE]: reactions.LOVE
    }[reactionSelected]);
  }

  return (
    <>
        <select value={reaction} onChange={handleReact}>
            <option value={'default'}>Default</option>
            <option value={reactions.LIKE}>👍 Like</option>
            <option value={reactions.FIRE}>🔥 Fire</option>
            <option value={reactions.LOVE}>❤️ Love</option>
        </select>
        
        <Switch
            value={reaction}
            components={{
                [reactions.LIKE]: CaseReactionLike,
                [reactions.FIRE]: CaseReactionFire,
                [reactions.LOVE]: CaseReactionLove,
            }}
            defaultComponent={CaseDefault}
        />
    </>
  )
};
```

### API

The `Switch` component accepts the following props:

- `value`            - the value to check with the cases to render the corresponding component.
- `components`       - the list of case components to be rendered when case matches.
- `defaultComponent` - the "default" component to be rendered if the value does not match any of the given cases.
